Fortnite Viewer

Fortnite Viewer is a progressive web app written in Angular 7 with a Node.JS and TypeScript backend API.

Fortnite Viewer lets users quickly view:

In-game store
Upcoming items
Official news posts
Weekly challenges
Specific items
User statistics

And also receive notifications when their favorite item is back in the shop!

Technologies Used:

Front-end:

Angular
Angular Material
Firebase Hosting

Back-end:

Node.js
Firebase Cloud Functions

Screenshots:

Daily Store

Store

User Statistics

State

Note: Stats come directly from Epic Games but still may not reflect accurately as they deprecate and implement these without notice.

Examples:

Service to handle subscribing to an item

sub(item: string, type: string) {
    const topic = item + type;
    const details = {
      item,
      type,
      topic
    };
    this.fun
      .httpsCallable('[cloud function name')({
        topic: topic,
        token: this.token,
        details
      })
      .pipe(tap(_ => this.makeToast(`Subscribed to ${item}`)))
      .subscribe();
  }

Reusable item component to display store items throughout the application

<div class="card-container">
  <div class="container">
    <img
      alt="load image"
      [src]="item.images.icon"
      (load)="loaded = true"
      [hidden]="true"
    />
    <img
      [alt]="item.name"
      [src]="item.images.icon"
      *ngIf="loaded"
      [ngClass]="item.rarity"
      class="item-img"
    />
    <img
      alt="loading item"
      src="../../assets/img/default.png"
      *ngIf="!loaded"
      [ngClass]="item.rarity"
      class="item-img"
    />
    <div class="favorite-overlay block" *ngIf="fcm.token">
      <mat-icon
        class="check-icon"
        [@changeState]="notify"
        (click)="changeState()"
        >add_alert</mat-icon
      >
    </div>
    <div class="details-overlay block" [ngClass]="item.rarity + '-border'">
      <div class="details block">
        <div class="name">{{item.name}}</div>
        <div *ngIf="item.price" class="price">
          <div class="amount">{{item.price}}</div>
          <img
            alt="currency"
            *ngIf="item.priceIconLink"
            class="price-img"
            [src]="item.priceIconLink"
          />
        </div>
      </div>
    </div>
  </div>
</div>

Built with React, React-Router, Styled-Components, Contentful, and 💖.